<template>
	<view>
		<form action="">

			<view class="table">
				<view class="row">
					<view class="left">用户名:</view>
					<view class="right">
						<input class="input name" placeholder="请输入用户名">
					</view>
				</view>
				<view class="row">
					<view class="left">密码:</view>
					<view class="right">
						<input class="input password" type="password" placeholder="请输入用户名">
					</view>
				</view>
				<view class="row">
					<view class="left">手机号:</view>
					<view class="right"> <input class="input phone" placeholder="请输入用户名"></view>
				</view>
				<view class="row">
					<view class="left">性别:</view>
					<view class="right">
						<radio-group name="sex" class="sex">
							<label>
								<radio value="1" checked="true" /><text>男</text>
							</label>
							<label>
								<radio value="0" /><text>女</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="row">
					<view class="left">生日:</view>
					<view class="right">
						<picker mode="date" class="birthday" @change="selectDate">
							<view>{{birthday}}</view>
						</picker>
					</view>
				</view>
				<view class="row">
					<view class="left">爱好:</view>
					<view class="right">
						<checkbox-group name="hobby" class="hobby">
							<label>
								<checkbox value="1" /><text>睡觉</text>
							</label>
							<label>
								<checkbox value="2" /><text>看书</text>
							</label>
							<label>
								<checkbox value="3" /><text>听音乐</text>
							</label>
							<label>
								<checkbox value="4" /><text>运动</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="row">
					<view class="left">同意协议:</view>
					<view class="right">
						<switch :checked="isAgree" @change="onAgree" />
					</view>
				</view>
				<view class="row">
					<button type="primary" @click="onSubmit">提交</button>
					<button type="warn" form-type="reset">重置</button>
				</view>
			</view>


		</form>

	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup() {
			const isAgree = ref(false);
			const birthday = ref("请选择生日");

			const onAgree = (e) => {
				isAgree.value = e.detail.value;
			}

			const onSubmit = () => {
				let msg = "注册成功";
				if (!isAgree.value) {
					msg = "请同意协议";
				}
				uni.showToast({
					title: msg
				})
			}

			const selectDate = (e) => {
				console.log(e);
				birthday.value = e.detail.value;
			}

			return {
				onAgree,
				onSubmit,
				selectDate,
				isAgree,
				birthday
			}
		}
	}
</script>

<style scoped>
	.table {
		width: 100%;
	}

	.row {
		width: 100%;
		border: 1rpx solid #ccc;
		display: flex;
	}

	.left {
		flex: 1;
		text-align: right;
		font-family: "黑体";
		font-size: 28rpx;
		font-weight: 600;
		height: 100rpx;
		line-height: 100rpx;

	}

	.right {
		flex: 4;
		line-height: 100rpx;
		padding-left: 30rpx;
	}

	.input {
		height: 100%;

	}

	.sex radio {
		transform: scale(.7);
	}

	.birthday {
		color: #809090;
	}

	.hobby checkbox {
		transform: scale(.7);
	}

	button {
		margin: 40rpx auto;
		width: 320rpx;
	}
</style>
